<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LarryCMS后台登录</title>
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<!-- load css -->
	<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/login.css" media="all">
</head>
<body>
<div class="layui-canvs"></div>
<form action="../loginAction!login"  method="post">
	<div class="layui-layout layui-layout-login">
		<h1>
			 <strong>Car维修后台</strong>
			 <em>Automobile maintenance System</em>
		</h1>
		<div class="layui-user-icon larry-login">
			 <input type="text" name="phone" placeholder="手机号" class="login_txtbx"/>
		</div>
		<div class="layui-pwd-icon larry-login">
			 <input type="password" name="pwd"  placeholder="密码" class="login_txtbx"/>
		</div>
	    <div class="layui-val-icon larry-login">
	    	<div class="layui-code-box">
	    		<input type="text" id="code" name="code" placeholder="验证码" maxlength="4" class="login_txtbx">
	            <canvas id="canvas" width="100" height="40"></canvas>
	    	</div>
	    </div>
	    <div class="layui-submit larry-login">
	    	
	    	<input type="button" value="立即登陆" class="submit_btn"/>
	    </div>
	    <div class="layui-login-text">
	    	<p>© 2016-2020 Larry 版权所有</p>
	    </div>
	</div>
</form>
<script type="text/javascript" src="common/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="jsplug/jparticle.jquery.js"></script>
<script type="text/javascript">

var show_num = [];
$(function () {
	if(window.top!=window.self){
		window.top.location.href=window.self.location.href;
	}
	
    draw(show_num);//加载验证码
 	$("#canvas").bind('click',function(){
	 draw(show_num);
 })
})
function draw(show_num) {
    var canvas_width = $('#canvas').width();
    var canvas_height = $('#canvas').height();
    var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
    var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
    var aCode = sCode.split(",");
    var aLength = aCode.length;//获取到数组的长度

    for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
        var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
        var txt = aCode[j];//得到随机的一个内容
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20;//文字在canvas上的x坐标
        var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";
        context.translate(x, y);
        context.rotate(deg);
        context.fillStyle = randomColor();
        context.fillText(txt, 0, 0);
        context.rotate(-deg);
        context.translate(-x, -y);
    }
    for (var i = 0; i <= 5; i++) { //验证码上显示线条
        context.strokeStyle = randomColor();
        context.beginPath();
        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.stroke();
    }
    for (var i = 0; i <= 30; i++) { //验证码上显示小点
        context.strokeStyle = randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
    }
}

function randomColor() {//得到随机的颜色值
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}
//验证码的方法
function check(){
	var user=$("input[name='accountNumber']").val();
	var pwd=$("input[name='pwd']").val();
	if (user == ""||pwd=="") {
	    alert("账号或密码为空！！！！！");
	    return;
	}
	
var text=$("#code").val().toLowerCase();
var num = show_num.join("");
if (text == "") {
    alert("请输入验证码");
    return;
}
 if (text != num) {
    alert("验证码错误请重新输入！！！");
    $("#code").val('');
    setTimeout(function () {
        draw(show_num);
    }, 1000);
    return;
 }
  if(text==num){
	  $("form").submit();
  }
    
}

$(function(){
	$(".layui-canvs").jParticle({
		background: "#141414",
		color: "#E6E6E6"
	});
});
	//判断验证码是否正确
$(".submit_btn").bind('click',function(){
	check();
})

</script>
</body>
</html>